<template>
  <KView class="retreat-order-goods">
    <KView class="retreat-order-goods-title">
      <span>申请退款</span>
      <KView class="retreat-order-goods-close" @click="toClose">
        <sys-svg name="close" color="#b2b2b2"></sys-svg>
      </KView>
    </KView>
    <KView class="retreat-order-goods-line"></KView>

    <KView class="retreat-order-goods-content">
      <KView class="retreat-order-goods-content-title">退款原因</KView>
      <reason-checkbox v-model="reasonArr"></reason-checkbox>

      <KView class="retreat-order-goods-content-title">补充说明</KView>
      <KView class="retreat-order-goods-remark">
        <KView class="retreat-order-goods-textarea">
          <KView v-if="remark===''" class="retreat-order-textarea-placeholder">请在此输入您要补充的内容</KView>
          <textarea class="retreat-order-textarea-input" v-model="remark" :maxlength="100" :disable-default-padding="true"></textarea>
        </KView>
        <KView class="retreat-order-goods-count">{{remark.length}}/100</KView>
      </KView>
    </KView>
    <KView class="retreat-order-goods-btn">
      <KView @click="submitReason">提交</KView>
    </KView>
  </KView>
</template>

<script>
  import SysSvg from 'common/sysSvg';
  import ReasonCheckbox from './reasonCheckbox';

  import GoodsOrderData from 'models/goodsOrder/goodsOrderData';

  export default {
    props: {
      goods: {
        type: Object,
        required: true
      }
    },

    data() {
      return {
        reasonArr: [],
        remark: ''
      };
    },

    methods: {
      submitReason() {
        let reasonArr = this.reasonArr;
        if (reasonArr.length === 0) {
          this.$api.showToast({
            title: '至少选择一个退款原因',
            icon: 'none'
          });
          return;
        }

        let textList = [];
        let reasonList = GoodsOrderData.reasonList;
        for (let i = 0; i < reasonList.length; i++) {
          const reason = reasonList[i];
          if (reasonArr.indexOf(reason) !== -1) {
            textList.push(reason);
          }
        }

        let remark = this.remark;
        if (remark.trim() !== '') {
          textList.push(remark);
        }

        let data = textList.join('~');
        this.$emit('ensure', this.goods, data);
      },

      toClose() {
        this.$emit('close');
      }
    },

    components: {
      SysSvg,
      ReasonCheckbox
    }
  };

</script>

<style lang="scss">
  .retreat-order-goods {
    height: 100%;
    background: #ffffff;
    border-radius: 8px;

    .retreat-order-goods-title {
      height: formatPx(120);
      line-height: formatPx(120);
      font-size: formatPx(36);
      text-align: center;
      position: relative;

      .retreat-order-goods-close {
        position: absolute;
        top: 0;
        right: formatPx(10);
        width: formatPx(30);
        height: formatPx(90);
        padding: 0 formatPx(20);
      }
    }

    .retreat-order-goods-line {
      height: 1px;
      background: #e1e1e1;
    }

    .retreat-order-goods-content {
      margin-top: formatPx(30);
      margin-bottom: formatPx(30);
      height: calc(100% - #{formatPx(290)});
      font-size: formatPx(26);
      display: flex;
      flex-direction: column;

      .retreat-order-goods-content-title {
        padding: 0 formatPx(30);
        height: formatPx(36);
        line-height: formatPx(36);
      }

      .retreat-reason-checkbox {
        margin-top: formatPx(24);
        margin-bottom: formatPx(10);
      }

      .retreat-order-goods-remark {
        flex: 1;
        min-height: formatPx(100);
        margin: formatPx(24) formatPx(30) 0;
        overflow: auto;
        background: #f5f5f5;
        color: #999999;
        padding: formatPx(20);
        border-radius: 8px;

        .retreat-order-goods-textarea {
          height: calc(100% - #{formatPx(40)});
          position: relative;

          .retreat-order-textarea-placeholder {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            color: #999999;
          }

          .retreat-order-textarea-input {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            color: #333333;
            border: none;
            background: none;
            resize: none;
            padding: 0;
            padding-top: formatPx(6);
          }
        }

        .retreat-order-goods-count {
          margin-top: formatPx(10);
          height: formatPx(30);
          line-height: formatPx(30);
          text-align: right;
        }
      }
    }

    .retreat-order-goods-btn {
      padding: 0 formatPx(30);

      >div {
        height: formatPx(88);
        line-height: formatPx(88);
        font-size: formatPx(26);
        background: #59c264;
        color: #ffffff;
        text-align: center;
        border-radius: formatPx(44);
      }
    }
  }

</style>
